<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,user-scalable=no">
		<title>皮具定制 - 宝匠</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css">
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<link rel="stylesheet" type="text/css" href="css/pj.css">
		<script type="text/javascript">
		(function (doc, win) {
		var docEl = doc.documentElement,
		resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		recalc = function () {
		var clientWidth = docEl.clientWidth;
		if (!clientWidth) return;
		if (clientWidth < 640) {
		docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
		};
		};
		if (!doc.addEventListener) return;
		win.addEventListener(resizeEvt, recalc, false);
		doc.addEventListener('DOMContentLoaded', recalc, false);
		})(document, window);
		</script>
	</head>
	<body>
		<div class="grid-640 viewport">
			<header class="grid-640 header fn-clear">
				<a href="" class="a-left back"></a>
				<h1>皮具定制</h1>
				<a href="#" id="sub_pj" class="a-right">提交</a>
			</header>
			<section class="grid-640 content">
				<div class="select-area">
					<select name="style" id="sel-style">
						<option value="s0">日常</option>
						<option value="s1">小日子</option>
					</select>
					<select name="pkg" id="sel-pkg">
						<option value="0">手包1</option>
						<option value="1">手包2</option>
						<option value="2">手包3</option>
					</select>
				</div>
				<div id="show-area">
					<img data-pkID="pkg_01" src="images/pj/pkg/1.jpg" alt="" id="pkg">
					<div id="tar-img-wrap">
						<img src="#" alt="" id="tar-img">
					</div>
				</div>
				<div class="btn-rotate">
					<button class="r-handler" id="r-left"></button>
					<button class="r-handler" id="r-right"></button>
				</div>
				<div class="btn-scale">
					<button class="s-handler" id="s-big">+</button>
					<button class="s-handler" id="s-sml">-</button>
				</div>
				
				<div id="pic-list-wrap">
					<ul id="pic-list">
						<li data-id="1"><img src="images/pj/pic/sday01.png" alt=""></li>
						<li data-id="2"><img src="images/pj/pic/sday02.png" alt=""></li>
						<li data-id="3"><img src="images/pj/pic/sday03.png" alt=""></li>
						<li data-id="4"><img src="images/pj/pic/sday04.png" alt=""></li>
						<li data-id="5"><img src="images/pj/pic/sday05.png" alt=""></li>
						<li data-id="6"><img src="images/pj/pic/sday06.png" alt=""></li>
						<li data-id="7"><img src="images/pj/pic/sday07.png" alt=""></li>
						<li data-id="8"><img src="images/pj/pic/sday08.png" alt=""></li>
					</ul>
				</div>
			</section>
		</div>
		<script src='js/jquery.js'></script>
		<script src="js/custom-pj.js"></script>
	</body>
</html>